<!DOCTYPE html>
<html>
    <head>
        <title>homework5网页布局</title>
        <meta charset="utf-8">
        <style>
            * {
                margin: 0;
                padding: 0;
                list-style-type: none;
                text-decoration: none;
                color: #000;
            }
            .myContainer{
                display:flex;
                flex-direction: column;
                align-items:center
            }
            .header{
                background: url(./photo/homework网页布局1.jpg) no-repeat center;
                width:100%;
                display:flex;
                align-items: center;
                justify-content: center;
            }
            .header_bottom{
                display:flex;
                padding-top: 180px;
                }
            .li{
                margin-right:50px;
                background-color:whitesmoke;
                border-radius: 10%;
                width:80px;
                height:70px;
                justify-content:space-between;
                text-align: center;
                margin-bottom:10px;
                padding-top: 20px;
            }
            .span{color:lightseagreen}
            #content{
                width:1000px;
                display:flex;
                flex-direction: column;
            }
            #content_top{
                color:lightseagreen;
                background-color: rgba(128, 128, 128,0.2);
                width:960px;
                height:30px;
                justify-content: flex-start;
                padding:10px 20px;
                margin-top: 20px;
                margin-bottom: 20px;
            }
            #content_bottom{
                display:flex;

            }
            #content_bottom_left{
                display:flex;
                align-items: flex-start;
                flex-direction:column;
                height:700px;
                
                
            }
            #li_bottom_left{
                padding-top: 10px;
                display:flex;
                justify-content:center;
                width:250px;
                height:40px;
                background-color: rgba(128, 128, 128,0.1);
                border:solid rgba(128, 128, 128, 0.182)
            }
            #div_left_bottom{
                display:flex;
                flex-direction:column;
                margin-top: 50px;
                
               
            }
            #div_div_left_bottom{
                display:flex;
                justify-content: center;
                align-items: center;
                flex-direction:column;
                width:250px;
                height:80px;
                background-color:rgb(36, 149, 164);
                border-style: none;
                border-radius:5%;
                margin-top: 10px;
                font-size:22px
            }
            #div_div_left_bottom p{
                font-size: xx-small;
            }
            #content_bottom_right{
                display:flex;
                align-items: flex-start;
                margin-left: 30px;
            }
            #li_bottom_right{
                display:flex;
                align-items: center;
                padding-left: 20px;
                height:50px;
                width:700px;
                border-bottom:solid rgba(128, 128, 128, 0.182)
            }
            #li_bottom_right_title{
                border-bottom:solid lightseagreen 3px;
                color:gray;
            }
            #li_bottom_right_span{
               margin-left: 100px;
            }
            .thePage{
                margin:100px 0;
                width:500px;
                margin-left: 650px;
            }
            .thePage1{
                color: white;
                background-color:lightseagreen;
                margin-left: 10px;
                height:30px;
                width:70px;
                text-align: center;
                line-height: 30px;
            }
            .thePage2{
                color: white;
                background-color:lightseagreen;
                margin-left: 10px;
                height:30px;
                width:20px;
                text-align: center;
                line-height: 30px;
            }
            .thePage3{
                border:solid lightseagreen;
                margin-left: 10px;
                height:30px;
                width:20px;
                text-align: center;
                line-height: 30px;
            }
            .thePage4{
                margin-left: 10px;
                color:lightseagreen
            }
            #theLast{
                background-color:rgba(128, 128, 128,0.2) ;
                border-top:lightseagreen solid 6px;
                width:100%;
                height:200px;
                display:flex;
                align-items: center;
                flex-direction: column;
                justify-content: center;
            }
        </style>
    </head>
    <body>
        <div class="myContainer">
            <div class="header">
                <ul class="header_bottom">
                    <li class="li">
                        <img src="./photo/homework网页2.png">
                        <br>
                        <span class="span">政府信息</span>
                    </li>
                    <li class="li">
                        <img src="./photo/homework网页3.png">
                        <br>
                        <span class="span">印象北戴河</span>
                    </li>
                    <li class="li">
                        <img src="./photo/homework网页4.png">
                        <br>
                        <span class="span">政民互动</span>
                    </li>
                    <li class="li">
                        <img src="./photo/homework网页5.png">
                        <br>
                        <span class="span">专题专栏</span>
                    </li>
                    <li class="li">
                        <img src="./photo/homework网页6.png">
                        <br>
                        <span class="span">网上办事</span>
                    </li>
                    <li class="li">
                        <img src="./photo/homework网页7.png">
                        <br>
                        <span class="span">电子报刊</span>
                    </li>
                </ul>
            </div>
            <div id="content">
                <div id="content_top">
                    <a href="#" style="color:lightseagreen">首页.政府信息</a>><a href="#" style="color:lightseagreen">政府文件</a>>
                </div>
                <div id="content_bottom">
                    <div id="content_bottom_left">
                        <ul>
                            <li id="li_bottom_left" style="background-color: lightseagreen;">政府信息</li>
                            <li id="li_bottom_left"><a href="#">政府机构</a></li>
                            <li id="li_bottom_left"><a href="#">政府信息</a></li>
                            <li id="li_bottom_left"><a href="#" style="color:lightseagreen">政府文件</a></li>
                            <li id="li_bottom_left"><a href="#">法鲁法规</a></li>
                            <li id="li_bottom_left"><a href="#">发展规划</a></li>
                            <li id="li_bottom_left"><a href="#">人事任免</a></li>
                            <li id="li_bottom_left"><a href="#">应急管理</a></li>
                            <li id="li_bottom_left"><a href="#">行政收费</a></li>
                            <li id="li_bottom_left"><a href="#">财政信息</a></li>
                            <li id="li_bottom_left"><a href="#">实事工程</a></li>
                        </ul>
                        <div id="div_left_bottom">
                            <div id="div_div_left_bottom">
                                每日工作报告
                                <p>Daily work report</p>
                            </div>
                            <div id="div_div_left_bottom">
                                政府信息公开平台
                                <p>Goverment information disclosure platform</p>
                            </div>
                            <div id="div_div_left_bottom">
                                北戴河党建
                                <p>Peitaiho party building</p>
                            </div>
                        </div>
                    </div>
                    <div id="content_bottom_right">
                        <ul>
                            <li  id="li_bottom_right_title">
                                <span style="font-size:x-large;color:lightseagreen">政府文件</span>Goverment files
                            </li>
                            <li id="li_bottom_right">
                                <a href="#">关于印发《全区旅游行业整改提升及旅游市场秩序整治专项行动方案》</a>
                                <span id="li_bottom_right_span">2015-12-12</span> 
                            </li>
                            <li id="li_bottom_right" style="background-color:rgba(26, 161, 152, 0.1)">
                                <a href="#">关于印发《全区旅游行业整改提升及旅游市场秩序整治专项行动方案》</a>
                                <span id="li_bottom_right_span">2015-11-12</span> 
                            </li>
                            <li id="li_bottom_right">
                                <a href="#">关于印发《全区旅游行业整改提升及旅游市场秩序整治专项行动方案》</a>
                                <span id="li_bottom_right_span">2015-11-03</span> 
                            </li>
                            <li id="li_bottom_right" style="background-color:rgba(26, 161, 152, 0.1)">
                                <a href="#">关于印发《全区旅游行业整改提升及旅游市场秩序整治专项行动方案》</a>
                                <span id="li_bottom_right_span">2015-10-31</span> 
                            </li>
                            <li id="li_bottom_right">
                                <a href="#">关于印发《全区旅游行业整改提升及旅游市场秩序整治专项行动方案》</a>
                                <span id="li_bottom_right_span">2015-10-27</span> 
                            </li>
                            <li id="li_bottom_right" style="background-color:rgba(26, 161, 152, 0.1)">
                                <a href="#">关于印发《全区旅游行业整改提升及旅游市场秩序整治专项行动方案》</a> 
                                <span id="li_bottom_right_span">2015-10-24</span>
                            </li>
                            <li id="li_bottom_right">
                                <a href="#">关于印发《全区旅游行业整改提升及旅游市场秩序整治专项行动方案》</a> 
                                <span id="li_bottom_right_span">2015-10-17</span>
                            </li>
                            <li id="li_bottom_right" style="background-color:rgba(26, 161, 152, 0.1)">
                                <a href="#">关于印发《全区旅游行业整改提升及旅游市场秩序整治专项行动方案》</a> 
                                <span id="li_bottom_right_span">2015-09-23</span>
                            </li>
                            <li id="li_bottom_right">
                                <a href="#">关于印发《全区旅游行业整改提升及旅游市场秩序整治专项行动方案》</a> 
                                <span id="li_bottom_right_span">2015-09-17</span>
                            </li>
                            <li id="li_bottom_right" style="background-color:rgba(26, 161, 152, 0.1)">
                                <a href="#">关于印发《全区旅游行业整改提升及旅游市场秩序整治专项行动方案》</a> 
                                <span id="li_bottom_right_span">2015-08-27</span>
                            </li>
                            <li id="li_bottom_right">
                                <a href="#">关于印发《全区旅游行业整改提升及旅游市场秩序整治专项行动方案》</a>
                                <span id="li_bottom_right_span">2015-06-01</span> 
                            </li>
                            <li id="li_bottom_right" style="background-color:rgba(26, 161, 152, 0.1)">
                                <a href="#">关于印发《全区旅游行业整改提升及旅游市场秩序整治专项行动方案》</a> 
                                <span id="li_bottom_right_span">2015-05-29</span>
                            </li>
                            <li id="li_bottom_right">
                                <a href="#">关于印发《全区旅游行业整改提升及旅游市场秩序整治专项行动方案》</a> 
                                <span id="li_bottom_right_span">2015-05-27</span>
                            </li>
                            <li id="li_bottom_right" style="background-color:rgba(26, 161, 152, 0.1)">
                                <a href="#">关于印发《全区旅游行业整改提升及旅游市场秩序整治专项行动方案》</a> 
                                <span id="li_bottom_right_span">2015-05-17</span>
                            </li>
                            <li id="li_bottom_right">
                                <a href="#">关于印发《全区旅游行业整改提升及旅游市场秩序整治专项行动方案》</a> 
                                <span id="li_bottom_right_span">2015-04-18</span>
                            </li>
                            <li id="li_bottom_right" style="background-color:rgba(26, 161, 152, 0.1)">
                                <a href="#">关于印发《全区旅游行业整改提升及旅游市场秩序整治专项行动方案》</a> 
                                <span id="li_bottom_right_span">2015-04-27</span>
                            </li>
                            <li id="li_bottom_right" style="background-color:rgba(26, 161, 152, 0.1)">
                                <a href="#">关于印发《全区旅游行业整改提升及旅游市场秩序整治专项行动方案》</a>
                                <span id="li_bottom_right_span">2015-03-12</span> 
                            </li>
                            <li id="li_bottom_right">
                                <a href="#">关于印发《全区旅游行业整改提升及旅游市场秩序整治专项行动方案》</a>
                                <span id="li_bottom_right_span">2015-03-27</span> 
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="thePage">
                    <table>
                       <tr>
                        <td ><div class="thePage1">上一页</div></td>
                        <td><div class="thePage2">1</div></td>
                        <td><div class="thePage3">2</div></td>
                        <td><div class="thePage3">3</div></td>
                        <td ><div class="thePage3">4</div></td>
                        <td><div class="thePage4">...</div></td>
                        <td><div class="thePage3">6</div></td>
                        <td><div class="thePage1">下一页</div></td>
                        <td>共六页</td>
                       </tr>
                    </table>
            </div>
            <div id="theLast">
                <p>中共北戴河区委、北戴河区人民政府举办、北戴河区办公室承办</p>
                <p>CopyRight@2009,all rights reserved.</p>
                <p>E_mail:bdhxxh@beidaihe.gov.cn 冀ICP备0839039号</p>
            </div>
        </div>
    </body>
</html>